// 导入tab组件样式
import './tab.css';
// 从getData中导入getData函数
import {getData} from 'api/getData';
// 从config中导入常量
import {URL,TAB_ITEM_CLASS,TAB_ITEM_ACTIVE_CLASS} from './config';
// 设置Tab类
class Tab {
    constructor(el) {
        this.itemEls=el.querySelectorAll(TAB_ITEM_CLASS);
    }
    // setActiveItem方法
    setActiveItem(index) {
        for (const itemEl of this.itemEls) {
            // 将所有itemEls中的子元素移除TAB_ITEM_ACTIVE_CLASS类名
            itemEl.classList.remove(TAB_ITEM_ACTIVE_CLASS);
        }
        // 将下标为index的子元素添加TAB_ITEM_ACTIVE_CLASS类名
        this.itemEls[index].classList.add(TAB_ITEM_ACTIVE_CLASS);
    }
    // to方法
    to(index){
        // 如果已经存在dataP对象，并且dataP对象有xhr属性
        if (this.dataP && this.dataP.xhr) {
            // 调用已存在dataP对象的xhr属性的abort方法
            this.dataP.xhr.abort();
        }
        this.setActiveItem(index);
        // 设置detaP属性为调用getData函数返回的promise对象
        this.dataP= getData(`${URL}/${this.itemEls[index].dataset.n}`);
        // 返回这个dataP对象
        return this.dataP;
    }
}
// 导出Tab类
export default Tab;
